<template>
  <div class="ccui-home-index">
    <div class="ccui-app-container">
      <!-- 高级搜索 -->
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          ref="search"
          :formProp="formData"
          @search="search"
          @change="change"
          :isShowSearch="true"
          :selectClear="true"
          class="ccui-highsearch no-print"
        >
          <div class="ccui-tab-wrapper">
            <el-button
              :type="isActive === index ? 'table-top-active' : 'table-top'"
              size="mini"
              v-for="(item, index) in focuses"
              :key="'tab' + index"
              @click="tabChange(item.focus)"
            >
              <template v-if="item.focus === 'all'"
                >全部 ({{ totalNum }})
              </template>
              <template v-else-if="item.focus === 'unsubmitted'"
                >待提交
              </template>
              <template v-else-if="item.focus === 'approval'">审批中</template>

              <template v-else-if="item.focus === 'return'">审批退回</template>
            </el-button>
          </div>
          <div class="ccui-extend-btn">
            <el-button
              type="primary"
              ref="pcconclease-new-item"
              @click="handleGoNew"
              icon="icon-ccui-add-sup"
              >新增
            </el-button>
          </div>
          <template slot="search">
            <el-input
              v-model.trim="formData.settlementName"
              clearable
              searchLabel="结算单名称"
              placeholder="请输入结算单名称模糊查询"
              @blur="handleTrim('settlementName')"
            />

            <el-input
              v-model.trim="formData.settlementCode"
              clearable
              searchLabel="结算单编号"
              placeholder="请输入结算单编号模糊查询"
            />

            <el-input
              v-model.trim="formData.contractCode"
              clearable
              searchLabel="合同编号"
              placeholder="请输入合同编号模糊查询"
            />
    
              <el-input
                  v-model.trim="formData.formalContractCode"
                  clearable
                  searchLabel="合同正式编号"
                  placeholder="请输入合同正式编号模糊查询"
              />
     
            <el-date-picker
              v-model="formData.paymentApplyDate"
              searchLabel="结算期间"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              slot="searchItem4"
            />

            <el-input
              v-model.trim="formData.supplierName"
              clearable
              searchLabel="供应商"
              placeholder="请输入供应商模糊查询"
            />
          </template>
    
            <el-input
                v-model.trim="formData.settlementName"
                clearable
                searchLabel="结算单名称"
                placeholder="请输入结算单名称模糊查询"
                slot="searchItem1"
                @blur="handleTrim('settlementName')"
            />
            <el-input
                v-model.trim="formData.settlementCode"
                clearable
                searchLabel="结算单编号"
                placeholder="请输入结算单编号模糊查询"
                slot="searchItem2"
            />
          <el-input
            v-model.trim="formData.contractCode"
            clearable
            searchLabel="合同编号"
            placeholder="请输入合同编号模糊查询"
            slot="searchItem3"
          />
            <el-input
                v-model.trim="formData.formalContractCode"
                clearable
                searchLabel="合同正式编号"
                placeholder="请输入合同正式编号模糊查询"
                slot="searchItem4"
            />
          <el-date-picker
            v-model="formData.paymentApplyDate"
            searchLabel="结算期间"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            slot="searchItem5"
          />

          <el-input
            v-model.trim="formData.supplierName"
            clearable
            searchLabel="供应商"
            placeholder="请输入供应商模糊查询"
            slot="searchItem6"
          />
        </el-search>
      </div>
      <!-- table表格 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="tableData"
          :fit="true"
          :cell-style="cellStyle"
          border
          class="ccui-multifunctional-table"
          @header-dragend="tableTitleWidth"
          @row-click="handleRowClick"
          :cell-class-name="addClass"
        >
          <el-table-column label="序号" width="50" fixed>
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <template v-for="(table, index) in tableTheadOptions">
            <el-table-column
              :fixed="table.fixed || false"
              :key="index"
              :type="table.type"
              :label="table.label"
              :min-width="table.width"
              :prop="table.prop"
              :align="table.align || 'left'"
              :header-align="table.headerAlign || 'left'"
              :filters="table.filters"
              :formatter="formatterList[table.formatterName]"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </template>

          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                v-if="
                  row.billSource == '10'
                    ? false
                    : ['2', '4', '6'].includes(row.statusCode)
                "
                size="mini"
                type="text"
                @click="goEdit(row)"
                >编辑
              </el-button>
              <el-button
                v-if="
                  row.billSource == '10'
                    ? false
                    : ['2', '4'].includes(row.statusCode)
                "
                size="mini"
                type="text"
                @click="handleDelete(row)"
                >删除
              </el-button>
              <el-button
                v-if="row.billSource != 10 && ['3'].includes(row.statusCode)"
                size="mini"
                type="text"
                @click="getRevoke(row, 1)"
                >撤回
              </el-button>
              <el-button
                v-if="
                  row.supplierBillStatus == '3' &&
                  ['2', '4', '6'].includes(row.statusCode)
                "
                size="mini"
                type="text"
                @click="openReturnDialog(row)"
                >退回供应商
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ccui-table-footer" v-show="tableData.length > 0">
          <div id="ccui-paging">
            <el-pagination
              :total="totalNum"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <returnDialog ref="returnDialog" @getValue="getValue" />
  </div>
</template>

<script>
import maintenance from "../mixins/settlement-maintenance";
import returnDialog from "@/app/settlement-management/settlement-maintenance-approval/components/returnDialog";
export default {
  components: {
    returnDialog
  },
  name: "settlement-maintenance-all",
  mixins: [maintenance],
  data() {
    return {
      isActive: 0,
      tableName: this.tableList.settlementMaintenanceAll
    };
  }
};
</script>

<style lang="scss" scoped>
.ccui-home-index .ccui-statistics-card {
  padding: 0;
}

/deep/ .resAndSug {
  color: rgb(0, 137, 239);
  cursor: pointer;
}
</style>
